<!--
 * @Author: ChunLai
 * @Date: 2022-10-25 11:24:53
 * @LastEditTime: 2025-02-20 14:14:42
 * @Description: 产品介绍
 * @FilePath: \01.latest-short-insure\src\views\index\components\ProIntroduce.vue
-->
<template>
  <div class="pro_detail_module">
    <div class="md_pic" v-lazy-container="{ selector: 'img' }">
      <img
        v-for="(img, idx) in productImg"
        :key="idx"
        :data-src="`${imgUrl(img)}?v=${version}`"
      />
    </div>
    <div class="beianTxt-box" v-if="clauseNoList && clauseNoList.length > 0">
      <ol class="beianTxt-cons">
        <li
          class="beianTxt-cons-li"
          v-for="(item, index) in clauseNoList"
          :key="item.fileName + index"
        >
          <!-- v-if="item.type !== 'alink'" -->
          <span class="liItem" @click="goReadPage(item)">
            {{ item.name }}<br />
            <span class="numBox">{{ item.clauseNo }}</span>
            <van-icon class="rightArrow" name="arrow" />
          </span>
          <!-- <a
              class="liItem"
              v-else
              :key="`${item.name}${index}`"
              :href="item.linkUrl"
            >
              {{ item.name }}<br />
              <span class="numBox">{{ item.clauseNo }}</span>
              <van-icon class="rightArrow" name="arrow" />
            </a> -->
        </li>
      </ol>
    </div>
    <div class="baosi_html_box" v-html="baosiHtml" v-if="baosiHtml"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "ProIntroduce",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapGetters({
      version: "version",
      productImg: "home/productImg",
      baosiHtml: "page/baosiHtml",
      apiClauseList: "home/apiClauseList",
    }),
    clauseNoList() {
      return this.apiClauseList.filter((item) => item.clauseNo);
    },
    imgUrl() {
      return function (val) {
        if (val.indexOf("http") !== -1) {
          return val;
        } else {
          return `//wxou.mschn.cn/app_h5/insurance/dataModules/${this.gysEngName}/${this.mainRiskCode}/${val}`;
        }
      };
    },
  },
  methods: {
    goReadPage(item) {
      if (!item.fileUrl) return this.$toast("未查询到文件");
      // 使用新版PDF展示页
      this.$router.push(`/read?ftype=${item.suffixType}&fid=${item.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.pro_detail_module {
  background-color: #fff;
}
.beianTxt-box {
  padding: 10px;

  .beianTxt-cons {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    font-size: 14px;

    .beianTxt-cons-li {
      padding: 4px 0;
      color: #333;

      .liItem {
        position: relative;
        display: block;
        padding-right: 20px;

        .rightArrow {
          position: absolute;
          right: 0;
          top: 5px;
        }
      }

      a {
        color: #333;
      }

      .numBox {
        color: #999;
        display: block;
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
}
.baosi_html_box {
  font-size: 12px;
  color: #747474;
  padding: 10px 14px;
}
.md_pic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;

  img {
    display: block;
    max-width: 100%;
  }
}
</style>
